.pure-switch {
    display: var(--pure-switch-display, inline-flex);
    flex-direction: var(--pure-switch-flex-direction, row);
    align-items: var(--pure-switch-align-items, center);
    justify-content: var(--pure-switch-justify-content, space-between);
    font-size: var(--pure-switch-font-size, 1.733em);
    color: var(--pure-switch-color);
    line-height: var(--pure-switch-line-height, 1);
    width: var(--pure-switch-width, 1.8em);
    height: var(--pure-switch-height, 1em);
    box-sizing: border-box;
    position: relative;
    border-radius: var(--pure-switch-border-radius, var(--pure-switch-height, 1em));
    overflow: var(--pure-switch-overflow, hidden);
    transition-duration: var(--pure-switch-transition-duration, .3s);
}

.pure-switch-text {
    padding: var(--pure-switch-padding, 0 var(--pure-switch-text-gutter, 8px));
    font-size: var(--pure-switch-text-font-size, 0.4em);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    background: transparent;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    line-height: 1;
    transition-duration: var(--pure-switch-transition-duration, .3s);
}

.pure-switch-text-open {
    opacity: 0;
}

.pure-switch-open .pure-switch-text {
    color: var(--pure-switch-active-color, #ffffff);
}

.pure-switch-open .pure-switch-text-open {
    opacity: 1;
}

.pure-switch::before {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: var(--pure-switch-background, var(--pure-background-light));
    z-index: 0;
    display: block;
    transition-duration: var(--pure-switch-transition-duration, .3s);
    position: absolute;
}

.pure-switch-open::before {
    background: var(--pure-switch-active-background, var(--pure-theme-primary));
    opacity: var(--pure-switch-active-background-opacity, 1);
}

.pure-switch::after {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    border: var(--pure-switch-border-width) var(--pure-switch-border-style, solid) var(--pure-switch-border-color, var(--pure-switch-theme, var(--pure-theme-primary)));
    z-index: 2;
    position: absolute;
}

.pure-switch-node {
    width: calc(var(--pure-switch-node-size, var(--pure-switch-height, 1em)) - var(--pure-switch-node-gutter, 4px) * 2);
    height: calc(var(--pure-switch-node-size, var(--pure-switch-height, 1em)) - var(--pure-switch-node-gutter, 4px) * 2);
    border-radius: var(--pure-switch-node-border-radius, 50%);
    position: absolute;
    left: calc(var(--pure-switch-gutter, 4px));
    top: calc(var(--pure-switch-gutter, 4px));
    z-index: 6;
    background: var(--pure-switch-node-background, var(--pure-background-element));
    transition-duration: var(--pure-switch-transition-duration, .3s);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pure-switch-icon {
    font-size: var(--pure-switch-icon-font-size, 0.4em);
    line-height: 1;
}

.pure-switch-loading {
    color: var(--pure-switch-loading-color, var(--pure-theme-primary));
}

.pure-switch-status-icon {
    font-size: var(--pure-switch-icon-font-size, 0.5em);
}

.pure-switch-open-icon {
    color: var(--pure-switch-loading-color, var(--pure-theme-success));
}

.pure-switch-close-icon {
    color: var(--pure-switch-loading-color, var(--pure-theme-danger));
}

.pure-switch-open .pure-switch-node {
    left: calc(var(--pure-switch-width, 1.8em) - var(--pure-switch-node-size, var(--pure-switch-height, 1em)) + var(--pure-switch-node-gutter, 4px));
    background: var(--pure-switch-node-active-background, var(--pure-background-element));
}
